<!-- 服务（会员专用，看到平台提供的一些收费服务项目） -->
<template>
	<view class="service-item-con">
		<image class="deco-1" src="https://ylb123.oss-cn-hangzhou.aliyuncs.com/app/service-item-deco-1.jpg"></image>
		
		<view class="no-data-con"
			v-if="!serviceItems || serviceItems.length==0">
			<image src="https://ylb123.oss-cn-hangzhou.aliyuncs.com/app/empty.png"></image>
			<view class="title">暂无数据~</view>
		</view>
		<view class="pages-con" v-if="serviceItems && serviceItems.length>0">
			<view 
				v-for="(item, index) in serviceItems" :key="item.id"
				class="item">
				<view class="image-wrapper">
					<image :src="item.coverimg1" mode="aspectFill"></image>
				</view>
				<view class="text-con">
					<text class="title clamp">{{item.title}}</text>
					<view class="price-box">
						<text class="price">{{item.ylbprice}}</text>
						<text class="sale-count">累计服务{{item.totalsalecount<=0?1:item.totalsalecount}}</text>
					</view>
					<view class="oper">
						<button class="cu-btn bg-cyan round yu-yue"
							@tap="orderServiceItem(item)"><text space="emsp">现在预约</text>
						</button>
					</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		USER_IDENTITY,
		COMPANY_KEFU_PHONE1,
	} from "@/common/util/constants"
	
	export default {
		name: "serviceItem",
		props:{
			pageCur: String,
		},
		data() {
			return {
				userIdentity: '',
				serviceItems: [],
			}
		},
		created() {
			this.getUserInfo()
			this.loadServiceItem()
		},
		methods: {
			// 用户信息
			getUserInfo(){
				this.userIdentity = uni.getStorageSync(USER_IDENTITY)
			},
			//服务项目-加载
			loadServiceItem(){
				let that = this
				let _params = {
					pageNo: 1,
					pageSize: 20
				}
				uni.showLoading({
					title: '加载中...',
					mask: true,
				})
				that.$http.get("/prodservice/serviceitems/list", {params:_params}).then(res=>{
					if(res.data.success){
						uni.hideLoading()
						that.serviceItems = res.data.result.records
					}else{
						uni.hideLoading()
						that.serviceItems = []
						that.$tip.toast(res.data.message);
					}
				}).catch(err => {
					uni.hideLoading()
					that.serviceItems = []
				});
			},
			//服务项目-预约
			orderServiceItem(item){
				//this.$tip.toast('在线服务预约接入中...');
				if(this.userIdentity!='0'){
					this.$tip.toast('仅对会员开放');
					return false;
				}
				//this.$tip.toast('在线服务预约接入中...'); 
				uni.showLoading({
					title: '申请中..',
					mask: true,
				})
				setTimeout(function() {
					uni.showModal({
						title: '温馨提示',
						content: '预约成功(请勿重复申请)!\n随后平台客服将与您联系，了解进度或其它问题咨询欢迎致电\n' + COMPANY_KEFU_PHONE1,
						confirmText: '确定',
						showCancel: false,
						success: (showResult) => {
							if (showResult.confirm) {
								
							}
						}
					})
					uni.hideLoading()
				}, 5000);
			},
		}
	}
</script>

<style lang="scss" scoped>
.service-item-con{
	padding-bottom:100upx;
	.deco-1{
		width: 100%;
	}
}
/* 分页 */
.no-data-con{
	text-align: center;
	padding: 30% 0 0 0;
	image{
		width: 150px !important;
		height: 150px !important;
	}
	.title{
		color: #aaaaaa;
	}
}
.pages-con{
	display:flex;
	flex-wrap:wrap;
	padding: 20upx;
	.item{
		display:flex;
		flex-direction: column;
		width: 48%;
		overflow: hidden;
		background-color: #fff;
		margin-bottom: 25upx;
		border-radius: 15upx;
		border: 1px solid #ececec;
		&:nth-child(2n+1){
			margin-right: 4%;
		}
	}
	.image-wrapper{
		width: 100%;
		height: 330upx;
		/* border-radius: 10upx; */
		overflow: hidden;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.text-con{
		padding: 15upx;
		.title{
			/* text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden; */
			font-size: $uni-font-size-lg;
			color: $uni-text-color;
			height: 50upx;
			line-height: 50upx;
			overflow: hidden;
			border: 0px solid #f00;
			margin: 10upx 0;
		}
		.price-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10upx;
			margin-top: 10upx;
			font-size: 24upx;
			color: $uni-text-color-grey;
			.price{
				color: $uni-color-dc4c47;
				line-height: 36upx;
				font-size: 36upx;
				font-weight: bold;
				&:before{
					content: '￥';
					font-size: 20upx;
				}
				&:after{
					content: ' / 次';
					font-size: 20upx;
				}
			}
			.sale-count{
				font-size:$uni-font-size-sm;
				color: #999999;
				line-height: 1;
				&:after{
					content: '次';
				}
			}
		}
		.oper{
			margin: 15upx 0 0 0;
			.yu-yue{
				width: 100%;
				font-size: 26upx;
			}
		}
	}
	
}
</style>
